<template>
	<view class="container">
		<!-- 搜索 -->
		<view class="search">
			<input class="search-input" type="text" placeholder="搜索" />
		</view>
		<view class="content">
			<!-- 商品导航 -->
			<scroll-view scroll-y class="left-aside">
				<view v-for="cartItem in cartList" :key="cartItem.id" class="left-item"
					:class="{active: cartItem.id === currentId}" @click="handleCart(cartItem)">
					{{cartItem.name}}
				</view>
			</scroll-view>
			<!-- 商品列表 -->
			<scroll-view scroll-y scroll-with-animation :scroll-into-view="curScrollId" class="right-aside" @scroll="asideScroll">
				<view v-for="cateItem in goodsList" :key="cateItem.id" :id="'cate-'+ cateItem.id" class="right-item">
					<view class="goods-cate">{{cateItem.typeName}}</view>
					<view class="goods-list">
						<view class="goods-item" v-for="goodsItem in cateItem.list" :key="goodsItem.id" @click="handleDetails(goodsItem)">
							<image class="goods-img" :src="goodsItem.picture"></image>
							<view class="goods-text">
								<view class="goods-name">{{goodsItem.name}}</view>
								<view class="goods-no">排行第1名</view>
								<view class="goods-sales">已售11</view>
								<view class="goods-price">
									<text>💰18</text>
									<text class="addBtn">+</text>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="bottom">没有商品了</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				cartList: [], // 分类列表
				goodsList: [], // 商品列表
				currentId: 1,	// 当前分类
				curScrollId: 'cate-1', // 当前分类
				sizeCalcState: false,
				tabScrollTop: 0,
			}
		},
		onLoad() {
			this.getCatelist();
		},
		methods: {
			/**
			 * @description 获取商品列表
			 */
			async getCatelist() {
				const list = await this.$api.data('getCateList');
				this.goodsList = list;
				this.cartList = list.map(item => ({
					id: item.id,
					name: item.typeName
				}));
			},
			/**
			 * @description 切换商品种类
			 * @param {Object} 某个商品种类
			 */
			handleCart(item) {
				if(!this.sizeCalcState){
					this.calcSize();
				}
				this.currentId = item.id;
				this.curScrollId = 'cate-' + item.id;
			},
			/**
			 * @description 商品滚动事件
			 * @param {Object} e
			 */
			asideScroll(e) {
				if(!this.sizeCalcState){
					this.calcSize();
				}
				let scrollTop = e.detail.scrollTop;
				let tabs = this.goodsList.filter(item => item.top <= scrollTop).reverse();
				if(tabs.length > 0){
					this.currentId = tabs[0].id;
				}
			},
			/**
			 * @description 商品详情
			 * @param {Object} 某个商品信息
			 */
			handleDetails(item) {
				uni.navigateTo({
					url: `/pages/details/details?id=${item.id}`
				});
			},
			/**
			 * @description 计算每个种类节点距顶部的高度
			 */
			calcSize(){
				let h = 0;
				this.goodsList.forEach(item=>{
					// 获取节点信息
					const view = uni.createSelectorQuery().select("#cate-" + item.id);
					view.fields({
						rect: false, // 节点布局位置信息
						size: true, // 节点尺寸信息
						scrollOffset: false, // 节点滚动信息
					}, (res) => {
						// 第一个参数指定为true的相关信息
						item.top = h;
						h += parseInt(res.height);
					}).exec(res => {
						// 成功的回调
					});
				})
				this.sizeCalcState = true;
			}
		},
	}
</script>

<style lang="scss">
	page,
	.container {
		height: 100%;
		background-color: #f8f8f8;
	}

	.container {
		display: flex;
		flex-direction: column;
	}

	// 搜索栏
	.search {
		display: flex;
		align-items: center;
		justify-content: center;
		box-sizing: border-box;
		padding: 10upx 30upx;
		height: 100upx;
		width: 100%;

		.search-input {
			width: 100%;
			height: 85%;
			padding: 0 20upx;
			background-color: #fff;
			border-radius: 10upx;
			font-size: 28upx;
		}
	}

	// 
	.content {
		display: flex;
		height: calc(100% - 100upx);
	}

	// 左侧菜单栏
	.left-aside {
		flex-shrink: 0;
		width: 180upx;
		height: 100%;

		.left-item {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 100%;
			height: 100upx;
			font-size: 28upx;
			color: $uni-text-color;
			position: relative;

			&.active {
				font-weight: bold;
				background-color: #fff;

				&:before {
					content: '';
					position: absolute;
					left: 0;
					top: 50%;
					transform: translateY(-50%);
					height: 36upx;
					width: 8upx;
					background-color: #fff;
					border-radius: 0 4px 4px 0;
					opacity: .8;
				}
			}
		}
	}

	// 右侧商品
	.right-aside {
		flex: 1;
		overflow: hidden;
		padding: 0 20upx;
		background-color: #fff;
		.right-item{
			.goods-cate{
				color: #000;
				display: flex;
				align-items: center;
				height: 70upx;
				padding-top: 8upx;
				font-size: 28upx;
				font-weight: bold;
			}
			.goods-list{
				display: flex;
				flex-wrap: wrap;
				width: 100%;
				background: #fff;
				padding-top: 12upx;
				&:after{
					content: '';
					flex: 99;
					height: 0;
				}
				.goods-item{
					width: 100%;
					display: flex;
					color: #666;
					padding: 20upx;
					font-size: 28upx;
					.goods-text{
						flex: 1;
					}
					.goods-img{
						width: 160upx;
						height: 160upx;
						margin-bottom: 10upx;
						margin-right: 10upx;
					}
					.goods-name{
						font-weight: 600;
						font-size: 36upx;
					}
					.goods-price{
						width: 100%;
						display: flex;
						justify-content: space-between;
						align-items: center;
						.addBtn{
							border-radius: 50%;
							width: 40upx;
							height: 40upx;
							line-height: 40upx;
							text-align: center;
							background-color: green;
							color: #fff;
						}
					}
				}
			}
		}
		.bottom{
			height: 80%;
			display: flex;
			justify-content: center;
			align-items: center;
		}
	}
</style>